<template>
    <!-- 申请人弹框-->
    <el-col :span="12">
      <el-dialog
        title="申请人列表"
        :visible.sync="dialogApplicantIsShow"
        class="dialogContianer"
        width="850px"
        :append-to-body="true"
        v-if="dialogApplicantIsShow"
        :close-on-click-modal="false"
        :before-close="closeDialog"
      >
        <div class="dialog-query-panel">
          <el-form :model="dialogApplicant"
                   :inline="true" class="demo-ruleForm btn-panel">
            <el-form-item label="用户编码">
              <el-input
                placeholder=""
                v-model="dialogApplicant.userNo"
                v-restrict="{ maxLength: 100 }"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item label="用户名称">
              <el-input
                placeholder=""
                v-restrict="{ maxLength: 100 }"
                v-model="dialogApplicant.userName"
                class="input-with-select"
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchApplicantList"
              ><span class="iconfont icon-chaxun"></span>查询</el-button
              >
            </el-form-item>
          </el-form>
        </div>
        <el-table
          border
          stripe
          highlight-current-row
          :data="dialogApplicantList"
          ref="singleTable"
          height="calc(45vh)"
          @row-click="selApplicantRow"
          @row-dblclick="dbClickApplicant"
        >
          <el-table-column width="60" label="序号" header-align="center" prop="index">
          </el-table-column>
          <el-table-column
            v-for="(item, index) in dialogApplicantHeader"
            :key="index"
            :label="item.name"
            header-align="center"
            :show-overflow-tooltip="true"
          >
            <template slot-scope="scope">
              {{ scope.row[item.code] }}
            </template>
          </el-table-column>
        </el-table>
        <div class="pageBox clearfix page-panel">
          <el-pagination
            background
            @current-change="getApplicantDialogList"
            :current-page="dialogApplicantPage.pageNo"
            :page-size="dialogApplicantPage.pageSize"
            layout="total, prev, pager, next, jumper"
            :total="dialogApplicantPage.totalRecord"
          >
          </el-pagination>
        </div>
        <span slot="footer" class="dialog-footer btn-panel">
          <el-button @click="closeDialog"><span class="iconfont icon-shanchu2"></span>取消</el-button>
          <el-button
            type="primary"
            @click="saveApplicantForm"
            :disabled="Object.keys(selectedApplicantRow).length === 0"
          ><span class="iconfont icon-queren"></span>确定</el-button
          >
        </span>
      </el-dialog>
    </el-col>
    <!-- 弹框结束-->
</template>

<script>
import uuid from "@/utils/uuid";
import {getUser} from "@/model/api/main/extend/emailTaskModule";
export default {
  name: "applicantPerson",
  props: {
    dialogApplicantIsShow: {
      type: Boolean,
      default: false,
    },
  },
  methods: {
    closeDialog(){
      this.dialogApplicantPage.pageNo = 1;
      this.dialogApplicant.userNo = '';
      this.dialogApplicant.userName = '';
      this.$emit('update:dialogApplicantIsShow', false);
    },
    getApplicantDialogList(val) {
      this.dialogApplicantPage.pageNo = val;
      this.personParams.pageNo = val;
      this.searchApplicantList();
    },
    searchApplicantList() {
      this.selectedApplicantRow = {};
      this.personParams = {
        requestId: uuid(32, 32),
        pageSize: this.dialogApplicantPage.pageSize,
        pageNo: this.dialogApplicantPage.pageNo,
        userNo: this.dialogApplicant.userNo,
        userName: this.dialogApplicant.userName,
        userState: '0', // 默认传参
        orgWildcard: '1C|O', // 默认传参
      };
      getUser(this.personParams)
        .then(res => {
          if (res.success === true) {
            // this.dialogPeopleList = res.rows
            this.dialogApplicantList = (res.rows || []).map((item, index) => {
              item.index = index + 1 + (this.dialogApplicantPage.pageNo - 1) * this.dialogApplicantPage.pageSize;
              return item;
            });
            this.dialogApplicantPage.totalRecord = res.count;
            this.$nextTick(_ => {
              this.$refs.singleTable.doLayout();
            });
          }
        })
        .catch(() => {});
    },
    saveApplicantForm() {

    },
    selApplicantRow(val) {
      this.selectedApplicantRow = val;
    },
    dbClickApplicant(val) {
      this.$emit('setApplicantPerson', val);
      this.closeDialog();
    },
  },
  data() {
    return {
      dialogApplicant: {
        userNo: '',
        userName: '',
      },
      dialogApplicantList: [],
      dialogApplicantHeader: [
        {
          name: '用户编码',
          code: 'userNo',
        },

        {
          name: '用户名称',
          code: 'userName',
        },
      ],
      dialogApplicantPage: {
        pageNo: 1,
        pageSize: 15,
        totalRecord: 0,
      },
      selectedApplicantRow: {},
      personParams: {}
    }
  },
  watch: {
    dialogApplicantIsShow(newVal, oldVal) {
      if(newVal) {
        this.searchApplicantList()
      }
    }
  }
}

</script>
<style scoped lang="scss">

</style>